<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电影作业</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        /* list-style: none; */
      }
      img {
        width: 100%;
        display: block;
      }
      .imgBox,
      .fileText,
      .btnBox {
        display: inline-block;
      }
      .fileText {
        margin-left: 5px;
      }
      .fileText,
      .btnBox {
        vertical-align: middle;
      }
      .imgBox {
        width: 100px;
      }
      .fileText .title h2,
      .Imax {
        display: inline-block;
        vertical-align: middle;
      }
      .Imax {
        width: 70px;
        border: 1px solid skyblue;
        background: linear-gradient(to right, skyblue 40%, #fff 40%);
        text-align: center;
        font-size: 0;
        border-radius: 3px;
      }
      .Imax span {
        display: inline-block;
        font-size: 14px;
      }
      .Imax span:first-child {
        width: 40%;
        color: #fff;
      }
      .Imax span:last-child {
        width: 60%;
        color: skyblue;
      }
      .fileText p {
        color: #888;
        font-size: 16px;
      }
      p span {
        color: #efbb11;
        font-size: 18px;
      }
      .right {
        display: inline-block;
        vertical-align: top;
        border-bottom: 1px solid #000;
      }
      .btnBox button {
        width: 80px;
        height: 30px;
        background-color: red;
        border: 0;
        border-radius: 15px;
      }
      .btnBox button a {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <!-- 最外层容器 -->
    <div class="wrap">
      <main>
        <!-- 单个电影 -->
        <div class="filmBox">
          <!-- 电影海报 -->
          <div class="imgBox">
            <img
              src="	https://img0.baidu.com/it/u=2218300972,522135565&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
              alt=""
            />
          </div>
          <!-- 右边 -->
          <div class="right">
            <div class="fileText">
              <!-- 电影名称 -->
              <div class="title">
                <h2>流浪地球2</h2>
                <!-- 蓝色圆角边框部分 -->
                <div class="Imax">
                  <span>3D</span>
                  <span>IMAX</span>
                </div>
              </div>
              <p>观众评价<span>9.5</span></p>
              <p>主演:吴京，刘德华，李雪健...</p>
              <p>今天999家影院放映9999场</p>
            </div>
            <!-- 购票按钮 -->
            <div class="btnBox">
              <button>
                <a href="">购票</a>
              </button>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>
